<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, watch, onMounted, onUnmounted } from "vue";

const props = defineProps({
  chartData: {
    type: Object,
    requirred: true
  }
});

const chartRef = ref()
const emit = defineEmits(["click"]);


let charts = {};

watch(props.chartData, (newVal, oldVal) => {
  console.log(newVal)
  charts.setOption(newVal);
});

onMounted(() => {
  initEcharts();
});

//处理echart的缩放问题
const resizeFunction = () => {
  charts.resize();
};

const initEcharts = () => {
  charts = echarts.init(chartRef.value);

  window.addEventListener("resize", resizeFunction, false);

  charts.on("click", (params) => {
    emit("click", params);
  });

  charts.setOption(props.chartData);
};

onUnmounted(() => {
  window.removeEventListener("resize", resizeFunction);
});
</script>
